<!doctype html>

<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="./lib/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="./lib/wyrem.js"></script>
	<!-- <script src="./lib/vue.js"></script> -->
	<script src="./lib/tool.js"></script>
	<script src="./lib/iscroll-lite.js"></script>
	<script src="./lib/drag.js" type="text/javascript"></script>
	<script src="./lib/drag.js" type="text/javascript"></script>
	<script src="./lib/touch.min.js"></script>
	<script src="./lib/html2canvas.min.js" type="text/javascript"></script>
	<!-- <script src="./lib/vconsole.min.js"></script> -->
	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
			width: 100%;
		}

		body {
			background-color: #F3F3F3;
			font-size: 14px;
		}

		header {
			width: 100%;
			margin: 0 auto;
			height: 100%;
			background: #aaa;
		}

		#box {
			position: relative;
			top: 10%;
			left: 20%;
			width: 130px;
			height: 130px;
			padding: 30px;
			cursor: move;
			display: inline-block;
			background-color: #FFF;
			border: 1px solid #CCCCCC;
			-webkit-box-shadow: 10px 10px 25px #ccc;
			-moz-box-shadow: 10px 10px 25px #ccc;
			box-shadow: 10px 10px 25px #ccc;
			transform-origin: center;
		}

		#coor,
		#coor1,
		#coor2 {
			width: 30px;
			height: 30px;
			overflow: hidden;
			cursor: se-resize;
			position: absolute;
			right: 0;
			bottom: 0;
			background-color: #09C;
		}

		#app {
			padding: 20px;
			width: 100%;
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}


		em {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 30px;
			height: 30px;
			background: red;
		}

		#box i {
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			width: 30px;
			height: 30px;
			background: yellow;
		}

		.myImg {
			display: none;
			width: 100%;
			height: 100%;
		}

		footer {
			position: fixed;
			width: 100%;
			bottom: 20%;


		}

		footer button {
			padding: 20px;
			margin: 0 auto;

			background: blue;
		}

		/*#coor{right: auto;bottom: auto;top: 0;right: 0;}*/
	</style>

</head>



<body onload="preventMove()">
	<img src="" class="myImg" alt="">
	<div id="app">
		<header class="container">
			<div id="box" class="box">
				<div id="coor" class="single"></div>
				<em class="single"></em>
				<i class="single"></i>
				<img id="imgsss" class="single" src="./dog.png">
			</div>
		</header>
		<footer>
			<button id="saveBtn">保存图片</button>
		</footer>
	</div>
	<script type="text/javascript">
		touch.on('#saveBtn', 'tap', function () {
			html2canvas(document.querySelector("html")).then(function (canvas) {
				var image = canvas.toDataURL("image/jpeg");
			
				$('#app').hide();
				$('body>img').show().attr('src', image);
			});
		})
		touch.on('#box i', 'tap', function (e) {
			$('#box').remove();

		})
		var dx = 0,
			dy = 0;
		var localX, localY;



		// 阻止默认事件


		touch.on('#imgsss', 'dragstart', function (ev) {
			console.log(dx, dy);
		});
		touch.on('#imgsss', 'drag', function (ev) {
			dx = dx || 0;
			dy = dy || 0;
			ev.cancelBubble = true;
			localX = dx + ev.x + 'px';
			locaY = dy + ev.y + 'px';
			console.log(localX, locaY);
			document.getElementById('box').style.webkitTransform = `translate3d(${localX},${locaY},0)`;
		});


		touch.on('#imgsss', 'dragend', function (ev) {
			ev.originEvent.preventDefault();
			ev.cancelBubble = true;
			dx = dx + ev.x;
			dy = dy + ev.y;
		});

		var swiperStartX, swiperStartY;
		touch.on('#coor', "swipestart", function (ev) {
			ev.originEvent.preventDefault();
			swiperStartX = ev.x;
			swiperStartY = ev.y;
		})
		touch.on('#coor', "touchmove", function (ev) {
			console.log('222');

			ev.preventDefault(); //阻止默认事件  
			ev.originEvent.preventDefault();
		})
		touch.on('#coor', "swiping", function (ev) {
			console.log('111');
			ev.originEvent.preventDefault();
			var x = (ev.x - swiperStartX + Number($('#box').width()));
			var y = (ev.y - swiperStartY + Number($('#box').height()));
			if (y <= 50 || x <= 50) {
				return;
			}
			if (y >= 300 || x >= 300) {
				return;
			}
			console.log('cha', x, y);
			$('#box').css({
				height: y + 'px',
				width: x + 'px'
			})
		})

		touch.on('#coor', "swipeend", function (ev) {
			swiperStartX = ev.x;
			swiperStartY = ev.y;
		})
		//旋转 
		var i = 0;
		var angle = 30;
		hhh = 0;
		touch.on('em', 'touchstart', function (ev) {
			ev.preventDefault(); //阻止默认事件  
			ev.originEvent.stopPropagation();
			ev.startRotate();
			hhh = 1;
			ev.originEvent.preventDefault();
		});
		touch.on('em', 'rotate', function (ev) {
			//  ev.stopPropagation();
			var totalAngle = angle + ev.rotation;
			if (ev.fingerStatus === 'end') {
				hhh = 0;
				angle = angle + ev.rotation;
			};
			this.parentNode.style.webkitTransform = 'rotate(' + totalAngle + 'deg)';
		});
	</script>
	<script type="text/javascript">
		//大小
		// changeDrage("#box", "#coor");
	</script>



</body>

</html>